/* This file contains global css that is imported by the server renderer */

@import url("@shoelace-style/shoelace/dist/themes/light.css");

@tailwind base;
@tailwind components;
@tailwind utilities;

/* The startup 101 font Inter https://rsms.me/inter/  */
:root {
	font-family: "Inter", sans-serif;
	--sl-input-border-color: theme(colors.outline);
	--sl-color-primary-50: var(--sl-color-cyan-50);
	--sl-color-primary-100: var(--sl-color-cyan-100);
	--sl-color-primary-200: var(--sl-color-cyan-200);
	--sl-color-primary-300: var(--sl-color-cyan-300);
	--sl-color-primary-400: var(--sl-color-cyan-400);
	--sl-color-primary-500: var(--sl-color-cyan-500);
	--sl-color-primary-600: var(--sl-color-cyan-600);
	--sl-color-primary-700: var(--sl-color-cyan-700);
	--sl-color-primary-800: var(--sl-color-cyan-800);
	--sl-color-primary-900: var(--sl-color-cyan-900);
	--sl-color-primary-950: var(--sl-color-cyan-950);

	--sl-input-font-family: "Inter", sans-serif;
	--sl-font-sans: "Inter", sans-serif;
}

/* The font Inter with variable font support (if supported) */
@supports (font-variation-settings: normal) {
	:root {
		font-family: "Inter var", sans-serif;
	}
}

.break-word {
	word-break: break-word;
}

/* Overwriting the toast positioning. Read https://shoelace.style/components/alert?id=the-toast-stack */
.sl-toast-stack {
	right: 0;
	bottom: 0;
	top: auto !important;
}

.hide-scrollbar::-webkit-scrollbar {
	display: none;
}

.hide-scrollbar {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

/* Styling the default scrollbars when overflow is set to auto or scroll */
.overflow-scrollbar::-webkit-scrollbar {
	width: 8px;
}

.overflow-scrollbar-x::-webkit-scrollbar {
	height: 8px;
}

/* Track */
.overflow-scrollbar::-webkit-scrollbar-track {
	background: transparent;
}

/* Handle */
.overflow-scrollbar::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 1000px;
}

/* Handle on hover */
.overflow-scrollbar::-webkit-scrollbar-thumb:hover {
	background: var(--sl-color-neutral-400);
}

.overflow-scrollbar:hover::-webkit-scrollbar-thumb {
	background: var(--sl-color-neutral-300);
}

/* Scroll Offset for Anchor Links */
article :target {
	scroll-margin-top: -256px;
}

/* Scroll Offset for Anchor Links */
.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
	text-decoration: none;
	font-weight: 600;
}

.tree-with-lines {
	--indent-guide-width: 2px;
}

sl-textarea {
	--sl-input-border-color: none;
	--sl-input-border-color-hover: none;
	--sl-input-border-color-focus: none;
	--sl-input-color: none;
	--sl-input-background-color: none;
	--sl-input-background-color-hover: none;
	--sl-input-background-color-focus: none;
	--sl-input-focus-ring-color: none;
	--sl-input-placeholder-color: theme(colors.outline-variant);
	overflow: hidden;
	max-width: 900px;
}

sl-textarea::part(textarea) {
	overflow: hidden;
	padding: 0.375rem;
}

sl-textarea::part(base) {
	border: none;
}

sl-tooltip::part(base) {
	--sl-tooltip-background-color: theme(colors.inverted-surface);
	--sl-tooltip-color: theme(colors.on-inverted-surface);
}

sl-tooltip.small::part(body) {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

sl-badge::part(base) {
	border: none;
}

sl-select::part(tag__remove-button) {
	display: none;
}

sl-select::part(listbox) {
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	padding-bottom: 0.25rem;
	width: 300px;
	translate: -1px;
	z-index: 30;
	--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
		0 8px 10px -6px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
		var(--tw-shadow);
}

sl-select::part(combobox) {
	/* height: 2rem; */
	padding-inline: 8px;
	padding-block: 2px;
}

sl-select::part(combobox):hover {
	border-color: theme(colors.outline);
	background-color: theme(colors.surface-1);
}

sl-select::part(expand-icon) {
	display: none;
}

sl-select::part(clear-button):hover {
	--sl-input-icon-color-hover: theme(colors.on-background);
	background: theme(colors.surface-variant);
	border-radius: 0.125rem;
}

/* sl-select::part(tag__base) {
	border: none;
	color: theme(colors.info);
	background-color: #eff0f2;
} */

sl-select::part(tags) {
	gap: 4px;
	font-size: 12px;
	line-height: 140%;
	font-weight: 500;
	margin-left: 0;
}

sl-select::part(tags) {
	--sl-input-height-small: 26px;
	--sl-color-neutral-50: theme(colors.surface-2);
	--sl-color-neutral-200: transparent;
	--sl-color-neutral-800: theme(colors.info);
}

sl-select::part(expand-icon) {
	margin-left: 8px;
	width: 9px;
	height: 9px;
}

sl-option::part(checked-icon) {
	padding-right: 12px;
}

sl-option::part(base) {
	padding-inline: 0.75rem;
}

sl-option::part(label) {
	display: flex;
	align-items: center;
	line-height: 1;
}

sl-select::part(tag) {
	--sl-input-height-small: 26px;
}

sl-select::part(combobox) sl-tag {
	--sl-input-height-small: 26px;
}

sl-tag {
	--sl-input-height-small: 26px;
}

sl-input::part(base) {
	--tw-ring-color: "#FFF";
	--sl-input-border-radius-large: 8px;
}

sl-tag::part(base) {
	border: none;
	color: theme(colors.info);
	background-color: theme(colors.surface-2);
}

sl-button[variant="default"]::part(base) {
	border-color: theme(colors.surface-4);
}

sl-button[variant="default"]::part(base):hover {
	border-color: theme(colors.surface-5);
	background-color: theme(colors.surface-1);
	color: theme(colors.on-background);
}

sl-button.on-inverted::part(base) {
	background-color: theme(colors.on-inverted-surface);
	color: theme(colors.inverted-surface);
}

sl-button.on-inverted::part(base):hover {
	background-color: theme(colors.on-primary) !important;
	color: theme(colors.primary);
	border-color: var(--sl-color-neutral-300);
}

sl-menu {
	width: 320px;
	border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
	border-radius: var(--sl-border-radius-medium);
	--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
		0 8px 10px -6px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
		var(--tw-shadow);
}

.ProseMirror p.is-editor-empty:first-child::before {
	color: #adb5bd;
	content: attr(data-placeholder);
	float: left;
	height: 0;
	pointer-events: none;
}

sl-listbox {
	--sl-font-sans: "Inter", sans-serif;
}

sl-details::part(base) {
	border-radius: 0;
	border: none;
	border-bottom: 1px solid theme(colors.surface-2);
	background: rgba(255, 255, 255, 0.5);
	transition: 0.3s;
}

sl-details[open]::part(base) {
	background: rgba(255, 255, 255, 1);
}

sl-details::part(content) {
	overflow-y: scroll;
	height: calc(100vh - 124px);
	padding-bottom: 8rem;
}
